<template>
  <div class="goodsDetail_content" v-if="detailDatas.id != 0">
    <jm-head ref="head"></jm-head>
      <div class="header_pick">
          <img v-lazy="detailDatas.cover">
      </div>
      <h2 class="box"><span>￥</span>{{detailDatas.price}}</h2>
      <p class="box">价格：<span>￥{{detailDatas.base_price}}</span></p>
      <h1 class="box">{{detailDatas.title}}</h1>
      <div class="box detail_cont" v-html="detailDatas.detail" style="padding: 0.3rem 0.3rem 1.5rem 0.3rem;">
      </div>
      <van-goods-action>
        <van-goods-action-icon
          icon="shop-o"
          text="首页"
          @click="goShop()"
        />
        <van-goods-action-icon
          :info="num"
          icon="cart-o"
          text="购物车"
          @click="goCart()"
        />
        <van-goods-action-button type="warning" :text="inCar ? '移除购物车' : '加入购物车'" @click="addCar()" />
        <van-goods-action-button type="danger" text="立即购买" @click="goBuy()" />
      </van-goods-action>
  </div>
</template>

<script>
  import JmHead from '../head/head'
  import Vue from 'vue'
  import { Toast,GoodsAction, GoodsActionIcon, GoodsActionButton, Lazyload  } from 'vant';
  import { getDetail } from "@/api/good";
  import { add, isInCar, removeGood } from "@/utils/handler-good"
  import { wxShare } from "@/assets/js/wxshare";
  // import wx from 'weixin-js-sdk';

  import { getCar } from '@/utils/auth'

  Vue.use(GoodsAction).use(GoodsActionIcon).use(GoodsActionButton).use(Lazyload)
  export default {
    name: 'goodsDetail',
    components: {
        JmHead
    },
    data () {
        return {
          detailDatas: { id: 0 },
          inCar: false,
          num:''
        }
    },
    activated() {
      this.getDetail(this.$route.query.id);
      this.getCar()
      this.$refs.head.setNavBarUrl('/')
      this.share();
    },
    methods: {
       getDetail(id) {
          const that = this
          getDetail({id}).then(res => {
              this.detailDatas = res.data
              this.inCar = isInCar(this.detailDatas.id)
          })
      },
      addCar(){
        if (this.inCar) {
            removeGood(this.detailDatas.id)
            Toast.success({message: '移除成功', duration: 2000})
        } else {
            add(this.detailDatas.id);
            Toast.success({message: '加入成功', duration: 2000})
        }
        this.inCar = isInCar(this.detailDatas.id)
        this.getCar()
      },
      goBuy() {
        if (!this.inCar) {
            add(this.detailDatas.id);
        }
        this.$router.push({path: '/shopcar'})
      },
      share(){
        const that = this
        let userId = that.$store.state.userInfo.id
        let store_id = that.$store.state.userInfo.store_id

        let url = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
        wxShare(url,store_id,userId,that.detailDatas.cover)
      },
      goShop(){
        this.$router.push({path: '/'})
      },
      goCart(){
        this.$router.push({path: '/shopcar'})
      },
      getCar(){
          let goods = getCar()
          if (goods && goods !== 'false') {
            goods = JSON.parse(goods)
          } else {
            goods = {}
          }
          let arr = Object.keys(goods)
          if(arr.length > 0){
              this.num = arr.length
          }else{
              this.num = ''
          }
      }

    },
    beforeRouteEnter(to, from, next) {

      //如果是ios环境
      if( /iPhone|mac|iPod|iPad/i.test(navigator.userAgent) ){
        // 记录进入app时的url
        if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
          window.entryUrl = location.href.split('#')[0]
        }
        window.entryUrl =  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;
      }
      else{
        window.entryUrl = window.location.origin + to.path
      }
    	var u = navigator.userAgent;
    	  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    	  // XXX: 修复iOS版微信HTML5 History兼容性问题
    	  if (isiOS && to.path !== location.pathname) {
    	    // 此处不可使用location.replace
          console.log("跳转新页面");
    	    location.assign(to.fullPath)
    	  } else {
    	    next()
    	  }
    },
  }
</script>

<style lang="stylus" scoped>
// 1rem---50px     2x/100
  .detail_cont >>> img
    width 100%

  // .detail_cont >>> p
  //   width 100%
  //   overflow hidden
  //   line-height 1.3
  //   color #000
  //   font-size .30rem
  .goodsDetail_content
    width 100%
    height 100vh
    background #f5f5f5

    .header_pick
      width 100%
      height 0
      padding-bottom 100%
      overflow hidden
      border 1px solid #eee
      img
        width 100%
        overflow hidden
    h2
      background #fff
      width 100%
      overflow hidden
      padding  .3rem .3rem .1rem .3rem
      line-height 1.3
      color #d64532
      font-size .4rem
      span
        font-size .28rem
    p
      background #fff
      width 100%
      overflow hidden
      padding 0 .3rem
      line-height 1
      font-size .26rem
      color #9b9b9b
      span
        position relative
        &::after
          content ''
          top 45%
          width 100%
          left 0
          border-bottom 1px solid #9b9b9b
          position absolute
    h1
      width 100%
      overflow hidden
      background #fff
      padding  .2rem .3rem
      line-height 1.3
      color #000
      font-size .30rem
    .detail_cont
      margin-top .3rem
      width 100%
      overflow hidden
      background #fff
      padding .3rem 0

    .van-goods-action
      border-top 1px solid #ccc

</style>
